<template>
  <div class="floor-layout tpl-61">
    <div class="layout-main" :style="`padding:0 ${data.blockStyle.pagePadding}px;`">
      <div class="row-img" :style="`width:${data.rowWidth}px;height:${data.rowHeight}px;`">
        <div class="row-img-cell"
          :style="`left:${(data.rowWidth+data.blockStyle.imgPadding)/data.blockList.length*index-(data.blockStyle.imgPadding/2)}px;
          padding: 0 ${data.blockStyle.imgPadding/2}px;
          width:${(data.rowWidth+data.blockStyle.imgPadding)/data.blockList.length}px;
          height:${data.rowHeight}px;`"
          v-for="(block, index) in data.blockList"
          :key="index">
          <layout-item
            :block="block"
            :isEdit="isEdit"
            @handle-edit="handleEditBlock(index)"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'

  export default {
    name: 'tpl_61',
    mixins: [mixin],
    title: '图片广告',
    dataTpl: {
      tpl_id: 61,
      blockList: [
        { block_type: 'IMAGE', block_value: '', block_opt: '' },
        { block_type: 'IMAGE', block_value: '', block_opt: '' }
      ],
      blockStyle: {
        showWidth: 160,
        rowCellWidth: 160,
        rowCellHeight: 160,
        imgPadding: 0,
        pagePadding: 0
      },
      rowWidth: 375,
      rowHeight: 187.5
    },
    created() {
      this.getData(this.data);
    },
    watch: {
      data (_newVal, _oldVal) {
        if (!_newVal) return
        this.getData(_newVal);
      }
    },
    methods: {
      getData(_data) {
        this.$nextTick(() => {
          let _screenWidth = window.screen.width; // 获取屏幕宽度
          this.data.rowWidth = _screenWidth > 750 ? 375 - 2 * _data.blockStyle.pagePadding : _screenWidth - 2 * _data.blockStyle.pagePadding;
          if (_data.blockList[0] && _data.blockList[0].block_value.img_url) {
            let _this = this;
            let _img = new Image();
            _img.src = this.data.blockList[0].block_value.img_url;
            _img.onload = function () {
              _this.data.rowHeight = _img.height/_img.width * _this.data.rowWidth/_this.data.blockList.length;
              _this.$forceUpdate();
            };
          } else {
            this.data.rowHeight = _screenWidth/_data.blockList.length;
          }
        })
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .layout-main {
    /deep/ .row-img {
      position: relative;
      .row-img-cell {
        position: absolute;
        top: 0;
        .no-image {
          height: 150px;
          // background: url('../imgs/row-img.png') no-repeat center;
          // background-size: 230px 70px;
        }
      }
    }
  }
</style>